<template>
  <div class="container">
    <div class="user_list">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="search">
          <a-form-item label="日期选择">
            <a-range-picker
              v-model="queryParam.time"
              :ranges="{
              '1周': [moment().startOf('day').subtract(1, 'weeks'), moment()],
              半个月: [moment().startOf('day').subtract(14, 'days'), moment()],
              '3个月': [moment().startOf('day').subtract(3, 'months'), moment()],
              '6个月': [moment().startOf('day').subtract(6, 'months'), moment()],
              '1年': [moment().startOf('day').subtract(1, 'years'), moment()],
            }"
              format="YYYY-MM-DD"
              @change="onChangeData"
              :disabled-date="disabled"
            />
          </a-form-item>
          <a-form-item label="用户ID">
            <a-input v-model="queryParam.userNo" placeholder="用户ID" />
          </a-form-item>
          <a-form-item label="登录名">
            <a-input v-model="queryParam.userPhone" placeholder="登录名" />
          </a-form-item>
          <a-form-item label="账变类型">
            <a-select v-model="queryParam.changeType" placeholder="请选择账变类型" style="width: 200px">
              <a-select-option :key="item.key" v-for="item in option" @onchange="onchange(item)">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" htmlType="submit" @click="search">查询</a-button>
            <a-button htmlType="submit" class="ml15" @click="searchReset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="loadData"
        bordered
        :rowKey="(record) => record.id"
      >
      </s-table>
    </div>
  </div>
</template>

<script>
import STable from '@/components/Table'
import { accountChangeList } from '@/api/user-manage'
import { mapGetters } from 'vuex'
import moment from 'moment'
import { common } from '@/common/index'
export default {
  name: 'teamList',
  components: {
    STable,
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      info: {},
      option: [
        { label: '每日签到', value: 1, key: 1 },
        { label: '充值', value: 2, key: 2 },
        { label: '提现', value: 3, key: 3 },
        { label: '投资项目', value: 4, key: 4 },
        { label: '投资收益', value: 5, key: 5 },
        { label: '会员收益', value: 6, key: 6 },
        { label: '团长奖励', value: 7, key: 7 },
        { label: '团员投资收益', value: 8, key: 8 },
        { label: '团员认购收益', value: 9, key: 9 },
        { label: '系统调整', value: 10, key: 10 },
        { label: '返还投资本金', value: 11, key: 11 },
      ],

      columns: [
        {
          title: '账变时间',
          dataIndex: 'accountChangeTime',
          align: 'center'
        },
        {
          title: '用户ID',
          dataIndex: 'userNo',
          align: 'center'
        },
        {
          title: '登录名',
          dataIndex: 'userPhone',
          align: 'center'
        },
        {
          title: '用户昵称',
          dataIndex: 'nickName',
          align: 'center'
        },
        {
          title: '账变类型',
          dataIndex: 'changeType',
          customRender: (text) => this.option[text - 1].label,
          align: 'center'
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          align: 'center'
        },
        {
          title: '账变金额',
          dataIndex: 'changeAmount',
          customRender: (text, record) =>
            record.amountType === 0 ? `+${this.common.numFormat(text)}` : `-${this.common.numFormat(text)}`,
          align: 'center'
        },
        {
          title: '账变前',
          dataIndex: 'beforeAmount',
          customRender: (text) => this.common.numFormat(text),
          align: 'center'
        },
        {
          title: '账变后',
          dataIndex: 'afterAmount',
          customRender: (text) => this.common.numFormat(text),
          align: 'center'
        },
      ],
      // 查询条件参数
      queryParam: { time: [null, null], userNo: '', userPhone: '', changeType: '' },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const { userId } = this.userInfo
        let params = {
          ...parameter,
          userId,
          ...this.queryParam,
          startTime: this.queryParam.time[0] ? `${this.queryParam.time[0]} 00:00:00` : '',
          endTime: this.queryParam.time[1] ? `${this.queryParam.time[1]} 23:59:59` : '',
        }
        delete params.time
        return new Promise((resolve, reject) => {
          accountChangeList(params)
            .then((res) => {
              if (res.code === 200) {
                resolve(res.data)
              } else {
                this.$message.error(res?.msg)
              }
            })
            .catch((err) => {
              reject(err)
            })
            .finally(() => {})
        })
      },
    }
  },
  methods: {
    moment,
    onChangeData(dates, dateStrings) {
      this.queryParam.time = dateStrings
    },
    disabled(current) {
      return current && current > moment().subtract().endOf('day')
    },
    refresh(isBackToFirstPage = false) {
      this.$refs.table.refresh(isBackToFirstPage)
    },
    onchange(data) {
      this.queryParam.changeType = data.key
    },
    search() {
      this.refresh(false)
    },
    searchReset() {
      this.queryParam = { time: [null, null], userNo: '', userPhone: '', changeType: '' }
      this.refresh(true)
    },
  },
}
</script>
<style lang="less" scoped>
.user_list {
  .form {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
}
.modal {
  /deep/ .ant-modal {
    width: 1000px !important;
  }
  .user_harder_img {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    span {
      padding-left: 15px;
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }
  .user_info {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
    &:last-child {
      border-bottom: none;
    }
    .item {
      display: flex;
      div {
        height: 40px;
        width: 50%;
      }
      span {
        &:first-child {
          width: 100px;
          text-align: left;
          padding: 0 15px;
        }
        &:last-child {
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .textarea {
        width: 80%;
      }
    }
  }
}
</style>
